<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：添加地址页面
 *		作   者：Frank
 *		创建日期：2023/08/10
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/10			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="main">
		<view class="add-path">
			<view class="path-item">
				<view class="item-left"> 姓名</view>
				<input class='item-right' v-model="myPath.name" placeholder="请填写收货人姓名"/>
			</view>
			<view class="path-item">
				<view class="item-left"> 电话</view>
				<input type="number" class='item-right' v-model="myPath.tel" placeholder="请填写收货人手机号"/>
			</view>
			<view class="path-item">
				<view class="item-left"> 地区</view>
				<input class='item-right' v-model="myPath.area" placeholder="请填写省/市/区"/>
				<!-- <view class='item-right item-choose' @tap="" > {{myPath.area}} > </view> -->
				<!-- <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" /> -->
			</view>
			<view class="path-item">
				<view class="item-left"> 详细地址</view>
				<textarea class='item-right item-right-details' v-model="myPath.detailAddr" placeholder="小区楼栋/乡村名称"/>
			</view>
			<view class="path-item" @tap="isDefault = !isDefault">
				<view class="item-left"> </view>
				<label >
					<checkbox :checked="isDefault" @tap="isDefault = !isDefault" /><text>设为默认收货地址</text>
				</label>
			</view>
		</view>
		<view class="save-btn" @tap="onClickSave">保存</view>
		<view class="del-btn" v-if="isUpdate" @tap="onClickDel">删除</view>		
	</view>
</template>

<script>
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'
	import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				isDefault:false,
				isUpdate:false,
				index:0,
				myPath:{
						name:'', 
						area:'', 
						detailAddr:'', 
						tel:''
					},
				pickerValueDefault:[0, 0, 0]
			}
		},
		computed:{
			...mapStores(userStore)
		},
		methods: {
			onClickOpenCityPicker(){
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				myPath.area = e.label.split("-").join('/');
			},
			onClickSave(){
				if(this.isUpdate){
					this.userStore.updatePath(this.index, this.myPath, this.isDefault);
				} else{
					this.userStore.addPath(this.myPath, this.isDefault);
				}
				uni.navigateBack();
			},
			onClickDel(){
				this.userStore.delPath(this.index);
				uni.navigateBack();
			}
		},
		onLoad(e) {
			if(e.index){
				let address = this.userStore.user.user_data.address;
				this.isUpdate = true;
				uni.setNavigationBarTitle({
					title:'编辑收货地址'
				});
				
				this.index = parseInt(e.index);
				this.myPath = address.list[this.index];
				if(this.index === address.defaultIdx){
					this.isDefault = true;
				}
			}		
		}
	}
</script>

<style scoped>
	.main{
		width: 100vw;
		height: 100vh;
		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.add-path{
		margin: 20rpx 16rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx 0;
	}
	.path-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;
		color:black;
		font-size: 32rpx;
	}
	.item-left{
		flex: 25;
	}
	.item-right{
		flex:75;
		background-color: #F6F6F6;
		border-radius: 20rpx;
		height: 80rpx;
		font-size: 36rpx;
		margin-right: 16rpx;
		padding-left: 16rpx;
	}
	.item-right-details{
		height: 240rpx;
		white-space: ;
	}
	.item-choose{
		text-align: right;
		line-height: 80rpx;
	}
	
	.save-btn{
		width: 400rpx;
		line-height: 100rpx;
		background-color: #ABA6FB;
		border-radius: 50rpx;
		text-align: center;
		color: white;
		margin-top: 50rpx;
	}
	.del-btn{
		width: 400rpx;
		line-height: 100rpx;
		border: 3rpx solid  #ABA6FB;
		border-radius: 50rpx;
		text-align: center;
		color: #ABA6FB;
		margin-top: 50rpx;
	}
</style>
